<template>
	<el-main class="flex-1 overflow-y-auto">
		<el-card shadow="never">
			<el-tabs tab-position="top" v-model="activeTab">
				<el-tab-pane label="站点设置" name="site">
					<el-form ref="form" :model="site" label-width="100px">
						<el-card shadow="never" header="站点信息">
							<el-form-item label="站点名称">
								<el-input v-model="site.name" maxlength="30" show-word-limit></el-input>
							</el-form-item>
							<el-form-item label="站点图标">
								<div>
									<sc-upload v-model="site.logo" :width="82" :height="82" class="mb-4"></sc-upload>
									<p class="text-[12px] text-[#a9a9a9]">建议图片尺寸：100*100像素；图片格式：jpg、png、jpeg。</p>
								</div>
							</el-form-item>
							<el-form-item label="关键词语">
								<el-input v-model="site.keywords" maxlength="30" show-word-limit></el-input>
							</el-form-item>
							<el-form-item label="网站简介">
								<el-input type="textarea" v-model="site.desc" maxlength="100" show-word-limit></el-input>
							</el-form-item>
						</el-card>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="应用设置" name="app">
					<el-form :model="app" label-width="100px">
						<el-card shadow="never" header="应用信息">
							<el-row :gutter="20">
								<el-col :span="16">
									<el-form-item label="应用名称" prop="name">
										<el-input v-model="app.name" maxlength="30" show-word-limit></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="应用版本" prop="name">
										<el-input v-model="app.version" maxlength="20" show-word-limit></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-form-item label="彩色图标">
								<div>
									<sc-upload v-model="app.icon" :width="82" :height="82" class="mb-4"></sc-upload>
									<p class="text-[12px] text-[#a9a9a9]">建议图片尺寸：100*100像素；图片格式：jpg、png、jpeg。</p>
								</div>
							</el-form-item>
							<el-form-item label="黑白图标">
								<div>
									<sc-upload v-model="app.rcon" :width="82" :height="82" class="mb-4"></sc-upload>
									<p class="text-[12px] text-[#a9a9a9]">建议图片尺寸：100*100像素；图片格式：jpg、png、jpeg。</p>
								</div>
							</el-form-item>
						</el-card>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="登陆设置" name="login">
					<el-form ref="form" :model="login" label-width="100px">
						<el-card shadow="never" header="平台端">
							<el-form-item label="启用验证码">
								<el-switch v-model="login.is_captcha"></el-switch>
							</el-form-item>
							<el-form-item label="彩色图标">
								<div>
									<sc-upload v-model="login.site_bg" :width="82" :height="82" class="mb-4"></sc-upload>
									<p class="text-[12px] text-[#a9a9a9]">建议图片尺寸：100*100像素；图片格式：jpg、png、jpeg。</p>
								</div>
							</el-form-item>
						</el-card>
						<el-card shadow="never" header="站点端" class="mt-5">
							<el-form-item label="启用验证码">
								<el-switch v-model="login.is_site_captcha"></el-switch>
							</el-form-item>
							<el-form-item label="彩色图标">
								<div>
									<sc-upload v-model="login.bg" :width="82" :height="82" class="mb-4"></sc-upload>
									<p class="text-[12px] text-[#a9a9a9]">建议图片尺寸：100*100像素；图片格式：jpg、png、jpeg。</p>
								</div>
							</el-form-item>
						</el-card>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="版权设置" name="copyright">
					<el-form ref="form" :model="copyright" label-width="100px">
						<el-card shadow="never" header="基础信息">
							<el-form-item label="公司图标">
								<div>
									<sc-upload v-model="copyright.logo" :width="82" :height="82" class="mb-4"></sc-upload>
									<p class="text-[12px] text-[#a9a9a9]">建议图片尺寸：100*100像素；图片格式：jpg、png、jpeg。</p>
								</div>
							</el-form-item>
							<el-form-item label="公司名称">
								<el-input v-model="copyright.company_name" maxlength="30" show-word-limit></el-input>
							</el-form-item>
							<el-form-item label="版本链接">
								<el-input v-model="copyright.copyright_link" maxlength="30" show-word-limit></el-input>
							</el-form-item>
							<el-form-item label="版权信息">
								<el-input type="textarea" v-model="copyright.copyright_desc" maxlength="100" show-word-limit></el-input>
							</el-form-item>
						</el-card>
						<el-card shadow="never" header="备案信息" class="mt-5">
							<el-row :gutter="20">
								<el-col :span="12">
									<el-form-item label="ICP备案号" prop="name">
										<el-input v-model="copyright.icp" maxlength="30" show-word-limit></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="ISP备案号" prop="name">
										<el-input v-model="copyright.isp" maxlength="20" show-word-limit></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="20">
								<el-col :span="12">
									<el-form-item label="市场监督链接" prop="name">
										<el-input v-model="copyright.icp_url" maxlength="20" show-word-limit></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="网站公安链接" prop="name">
										<el-input v-model="copyright.isp_url" maxlength="30" show-word-limit></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</el-card>
					</el-form>
				</el-tab-pane>
			</el-tabs>
		</el-card>
	</el-main>
	<el-footer height="51px" class="w-full flex items-center justify-center">
		<el-button type="primary" size="default" @click="checkActiveTab" :loading="isSave">保存</el-button>
	</el-footer>
</template>
<script setup lang="ts">
	const systemStore = useSystemStore()
	const site = computed(() => systemStore.website)
	const app = computed(() => systemStore.app)
	const login = computed(() => systemStore.login)
	const copyright = computed(() => systemStore.copyright)
	const activeTab = ref('site')
	const isSave = ref(false)
	const checkActiveTab = async () => {
		isSave.value = true
		let data
		switch (activeTab.value) {
			case 'site':
				data = site.value
				break
			case 'app':
				data = { key: 'APP_CONFIG', value: app.value }
				break
			case 'login':
				data = { key: 'LOGIN_CONFIG', value: login.value }
				break
			case 'copyright':
				data = { key: 'COPYRIGHT', value: copyright.value }
				break
		}
		let res
		if (activeTab.value === 'site') {
			res = await api.config.upsite.post(data)
		} else {
			res = await api.config.save.post(data)
		}

		if (res.code === 200) {
			ElMessage.success(res.message)
		} else {
			ElMessage.error(res.message)
		}
		isSave.value = false
	}
</script>
<style scoped>
	:deep(.el-upload .el-upload--picture-card) {
		width: 80px;
		height: 80px;
	}
</style>
